<template>
	<view class="wrapper" :style="{padding:`calc(472rpx + ${safeTop}px) 0 0`}">
		<div class="posf">
			<div v-if="userInfo" class="header flex-start" :style="{padding:`calc(100rpx + ${safeTop}px) 20rpx 60rpx`}">
				<image src="../../static/shouye/avatar.png" mode="aspectFill" class="avatar"></image>
				<div class="right-box flex1">
					<div class="f32 fbold cfff mb20">{{Hyxx.hymc}}</div>
					<!-- <div class="mb15 flex-start">
						<div class="f22 mr15 cfff">点击修改个人资料</div>
						<u-icon name="arrow-right" color="#FFFFFF" size="14" class="arrow-right"></u-icon>
					</div> -->
					<div class="recharge cfff space-between">
						<div class="f22">积分余额：<span class="f26">{{Hyxx.balance}}</span></div>
						<div class="f24 center btn-pay" @click="openLoginPage('./chongZhi')">充值</div>
					</div>
				</div>
			</div>
			<div v-else class="header flex-start" :style="{padding:`calc(100rpx + ${safeTop}px) 20rpx 60rpx`}"
				@click="openPage('../dengLu/dengLu')">
				<image src="../../static/shouye/avatar.png" mode="aspectFill" class="avatar"></image>
				<div class="right-box flex1">
					<div class="f32 fbold cfff mb20">点击登录</div>
				</div>
			</div>
			<div class="nav-bar space-around">
				<div class="colum" @click="openLoginPage('./dianZiPiaoQuan?navIndex=0')">
					<div class="f46 fbold mb30">{{Hyxx.ticketsNum}}</div>
					<div class="f26 c999">电影票订单</div>
				</div>
				<!-- <div class="colum" @click="openPage('./dianZiPiaoQuan')">
					<div class="f46 fbold mb30">{{Hyxx.audioNum}}</div>
					<div class="f26 c999">视听券</div>
				</div> -->
				<div class="colum" @click="openLoginPage('./dianZiPiaoQuan?navIndex=2')">
					<div class="f46 fbold mb30">{{Hyxx.elecNum}}</div>
					<div class="f26 c999">本地生活电子券</div>
				</div>
				<!-- <div class="colum">
					<div class="f46 fbold mb30">0</div>
					<div class="f26 c999">兑换券</div>
				</div> -->
			</div>
		</div>
		<div class="box1 bfff space-around">
			<div class="colum" @click="openLoginPage('../dingDan/dingDan')">
				<image src="../../static/shouye/wode3.png" mode="heightFix" class="order-icon mb30"></image>
				<div class="f26 c000">商品订单</div>
			</div>
			<div class="colum" @click="openLoginPage('./jiFenMingXi?navIndex=0')">
				<image src="../../static/shouye/wode1.png" mode="heightFix" class="order-icon mb30"></image>
				<div class="f26 c000">充值记录</div>
			</div>
			<div class="colum" @click="openLoginPage('./jiFenMingXi?navIndex=1')">
				<div class="order-icon mb30 posr">
					<image src="../../static/shouye/wode2.png" mode="heightFix" class="order-icon "></image>
					<!-- <div class="cfff posa num f22 center">2</div> -->
				</div>
				<div class="f26 c000">消费记录</div>
			</div>
			<div class="colum" @click="openLoginPage('./youHuiQuan')">
				<image src="../../static/shouye/wode3.png" mode="heightFix" class="order-icon mb30"></image>
				<div class="f26 c000">优惠券</div>
			</div>
		</div>
		<div class="box2 bfff flex-start fWrap">
			<div class="colum middle-box" @click="openLoginPage('./duiHuan')">
				<image src="../../static/shouye/wode4.png" mode="heightFix" class="t-icon mb30"></image>
				<div class="f26 c000">绑定福利卡</div>
			</div>
			<div class="colum middle-box" @click="openLoginPage('../dingDan/shouHuoDiZhi')">
				<image src="../../static/shouye/wode5.png" mode="heightFix" class="t-icon mb30"></image>
				<div class="f26 c000">收货地址</div>
			</div>
			<!-- 
			<div class="colum middle-box">
				<image src="../../static/shouye/wode6.png" mode="heightFix" class="t-icon mb30"></image>
				<div class="f26 c000">用户协议</div>
			</div> -->
			<div class="colum middle-box" @click="openPage('./guanYu')">
				<image src="../../static/shouye/wode7.png" mode="heightFix" class="t-icon mb30"></image>
				<div class="f26 c000">关于我们</div>
			</div>
			<!-- <button open-type="contact"> -->
			<div class="colum middle-box" @click="openLoginPage('../woDe/kefu')">
				<image src="../../static/shouye/wode8.png" mode="heightFix" class="t-icon mb30"></image>
				<div class="f26 c000">联系客服</div>
			</div>
			<!-- </button> -->
		</div>

		<div class="bth-red layout f28" @click="layout" v-if="userInfo">退出登录</div>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userInfo: '',
				Hyxx: {}
			}
		},
		onShow() {
			this.userInfo = uni.getStorageSync('uInfo')
			console.log(this.userInfo);
			if (this.userInfo) {
				this.getgetHyxx()
			}
		},
        onShareAppMessage: function () {
		    return {
		      title: '分享',
		      path: '/shouye/shouye?id=123'
		    }
		  },
		methods: {
			layout() {
				let that = this
				uni.showModal({
					title: '温馨提示',
					content: "确认退出登陆吗?",
					success(r) {
						if (r.confirm) {
							uni.clearStorageSync('uInfo')
							 
							// console.log(uni.getStorageSync('uInfo'));
							that.openPage('/pages/dengLu/dengLu')
						}
					}
				})
			},
			openLoginPage(url) {
				if (this.userInfo) {
					uni.navigateTo({
						url
					})
				} else {
					uni.navigateTo({
						url: '../dengLu/dengLu'
					})
				}

			},
			// 获取会员信息
			getgetHyxx() {
				this.$http('/api/getHyxx', {
					token: this.userInfo.token
				}).then((r) => {
					console.log(r)
					this.Hyxx = r.data
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.layout {
		width: 690rpx;
		height: 90rpx;
		margin: 60rpx auto 0;
		border-radius: 50rpx;
	}

	.num {
		background-color: red;
		border-radius: 50%;
		width: 30rpx;
		height: 30rpx;
		top: -10rpx;
		right: -10rpx;
	}

	.box2 {
		width: 705rpx;
		margin: 0 auto 20rpx;
		padding: 55rpx 50rpx 45rpx;
		border-radius: 15rpx;

		.t-icon {
			height: 40rpx;
			width: 43rpx;
		}

		.middle-box {
			margin-bottom: 50rpx;
		}

		.middle-box:not(:nth-of-type(4n)) {
			margin-right: 50rpx;
		}
	}

	.box1 {
		width: 705rpx;
		margin: 20rpx auto;
		padding: 30rpx 0 45rpx;
		border-radius: 15rpx;

		.order-icon {
			width: 45rpx;
			height: 40rpx;
		}
	}

	.posf {
		width: 100%;
		top: 0;
		left: 0;
		z-index: 5;
	}

	.nav-bar {
		margin-top: -33rpx;
		width: 100%;
		background: linear-gradient(to bottom, #FEE6E8, #FDFCFD);
		border-radius: 40rpx 40rpx 0rpx 0rpx;
		box-shadow: 0rpx -4rpx 6rpx 0 #FF5859;
		padding: 40rpx 0;

		.colum {
			width: 190rpx;
		}
	}

	.header {
		background: linear-gradient(to left, #F857A5, #FF5858);

		.avatar {
			width: 188rpx;
			height: 188rpx;
			margin-top: -25rpx;
		}

		.recharge {
			height: 60rpx;
			background: linear-gradient(to left, rgba(255, 255, 255, .5), rgba(255, 255, 255, 0));
			border-radius: 0 35rpx 35rpx 0;
			padding: 0 30rpx 0 0;

			.btn-pay {
				width: 90rpx;
				height: 40rpx;
				background: linear-gradient(to left, #F857A5, #FF5858);
				border-radius: 20rpx;
			}
		}
	}
</style>